<template>

  <div>
    <!-- Breadcrumb 面包屑 导航区-->
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">公告管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>公告列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- Card 卡片 卡片视图区-->
    <el-card class="box-card">
      <!-- 添加按钮区-->
      <div><el-button
        type="primary"
        @click="addDialogVisible = true"
      >添加公告</el-button></div>
      <!-- 表格区-->
      <el-table :data="dataList" border stripe>
        <el-table-column type="index" />
        <el-table-column prop="id" label="编号" />

        <el-table-column prop="title" label="标题" />
        <el-table-column prop="updateTime" label="更新时间" />

        <el-table-column label="操作">
          <!-- 操作模板-->
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域-->
      <el-pagination
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 修改用户信息的对话框-->
    <el-dialog
      title="修改公告"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="EditDialogClosed"
    >
      <div>
        <el-form ref="editform" :model="borderInfo" :rules="editrules">
          <el-form-item label="公告标题：" prop="name">
            <el-input v-model="borderInfo.title" />
          </el-form-item>
          <!--编辑器区-->
          <quill-editor ref="myTextEditor" v-model="borderInfo.content" :options="editorOption" />
          <!--文件上传区-->
          <el-form-item label="附件：">
            <div> <el-input v-model="borderInfo.fujian" :readonly="true">
              <el-button slot="append" size="mini" type="success" @click=" preViewVisible = true">预览</el-button>
            </el-input></div>
            <div> <el-upload
              ref="editUpload"
              :headers="headersObj"
              :action="uploadURL"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :multiple="false"
              :limit="1"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>

              <div slot="tip" class="el-upload__tip">只能上传doc/docx/pdf文件，且不超过4000kb</div>
            </el-upload>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditDialogClosed">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加用户信息的对话框-->
    <el-dialog
      title="添加公告"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <div>
        <el-form ref="addform" :model="borderInfo" :rules="editrules">
          <el-form-item label="公告标题：" prop="name">
            <el-input v-model="borderInfo.title" />
          </el-form-item>
          <!--编辑器区-->
          <quill-editor ref="myTextEditor" v-model="borderInfo.content" :options="editorOption" />
          <!--文件上传区-->
          <el-form-item label="附件：">
            <div> <el-input v-model="borderInfo.fujian" :readonly="true">
              <el-button slot="append" size="mini" type="success" @click=" preViewVisible = true">预览</el-button>
            </el-input></div>
            <div> <el-upload
              ref="addUpload"
              :headers="headersObj"
              :action="uploadURL"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :multiple="false"
              :limit="1"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>

              <div slot="tip" class="el-upload__tip">只能上传doc/docx/pdf文件，且不超过4000kb</div>
            </el-upload>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogClosed">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </el-dialog>
    <!--图片预览区-->
    <el-dialog
      title="文件预览"
      :visible.sync="preViewVisible"
      width="50%"
    >
      <a :href="previewPath">点击下载</a>

    </el-dialog>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import global_ from '@/utils/base.js'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      uploadURL: global_.BASE_URL + 'file/uploadDoc', // 上传组件的服务器地址
      preViewVisible: false, // 图片预览显示与隐藏
      previewPath: '', // 预览路径
      headersObj: {
        Authorization: window.sessionStorage.getItem('token')
      }, // 上传组件的请求头部
      editorOption: {
        placeholder: '请输入内容'
      },
      // 获取用户列表参数
      queryInfo: {
        // query: '',
        pagenum: 1, // 当前页码数
        pagesize: 5 // 当前每页有多少条
      },
      // 公告列表
      dataList: null,
      borderInfo: {
        title: '',
        content: '',
        id: '',
        fujian: ''
      }, // 公告详细信息
      total: 0, // 总共有多少条数据
      editDialogVisible: false, // 修改对话框显示与隐藏
      addDialogVisible: false, // add对话框显示与隐藏
      editrules: { // 修改规则
        title: [
          { required: true, message: '请输入标题！', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {

    addDialogVisible(val) {
      // 检测添加对话框显示状态  清除数据
      if (val === false) {
        this.borderInfo.title = ''
        this.borderInfo.content = ''
        this.borderInfo.id = ''
        this.borderInfo.fujian = ''
      }
    },
    editDialogVisible(val) {
      // 检测修改对话框显示状态  清除数据
      if (val === false) {
        this.borderInfo.title = ''
        this.borderInfo.content = ''
        this.borderInfo.id = ''
        this.borderInfo.fujian = ''
      }
    }
  },
  created() {
    this.getDataList()
  },

  methods: {
    // 优化异步操作 async await
    async getDataList() {
      console.log(this.queryInfo)
      const { data: res } = await this.$post('Boards/GetList', this.queryInfo)
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取数据失败' + res.message)
      this.dataList = res.data.records
      console.log(this.dataList)
      this.total = res.data.total
    },
    // 显示修改对话框 事件处理函数
    async showEditDialog(id) {
      console.log(id)
      // 获取公告信息

      const { data: res } = await this.$post('Boards/detail', { id: id })
      console.log(res.data)
      if (res.code !== 200) {
        return this.$message.error('读取信息失败' + res.message)
      }
      this.borderInfo = res.data.detail
      this.previewPath = this.borderInfo.fujian
      this.editDialogVisible = true
    },
    saveEdit() {
      // 修改确定
      this.$refs.editform.validate(async valid => {
        console.log(valid)
        if (!valid) {
          return false
        } // 验证失败
        // 发起添加用户表单的网络请求

        const { data: res } = await this.$post(
          'Boards/edit', this.borderInfo
        )
        if (res.code !== 200) {
          return this.$message.error('修改失败！' + res.message)
        }
        this.$message.success('修改成功！')
        this.$refs.editUpload.clearFiles() // 清空上传文件
        this.editDialogVisible = false
        this.getDataList()
      })
    },
    saveAdd() {
      // 修改确定
      this.$refs.addform.validate(async valid => {
        console.log(valid)
        if (!valid) {
          return false
        } // 验证失败
        // 发起添加用户表单的网络请求

        const { data: res } = await this.$post(
          'Boards/add', this.borderInfo
        )
        if (res.code !== 200) {
          return this.$message.error('添加失败！' + res.message)
        }
        this.$message.success('添加成功！')
        this.$refs.addUpload.clearFiles() // 清空上传文件
        this.addDialogVisible = false
        this.getDataList()
      })
    },
    EditDialogClosed() { // edit关闭窗口
      this.$refs.editUpload.clearFiles() // 清空上传文件
      this.editDialogVisible = false
    },
    addDialogClosed() { // add关闭窗口
      this.$refs.addUpload.clearFiles() // 清空上传文件
      this.addDialogVisible = false
    },
    // 监听分页数量设置
    handleSizeChange(newsize) {
      console.log(newsize)
      console.log(this.queryInfo.pagesize)
      this.queryInfo.pagesize = newsize
      this.getDataList()
    },
    // 监听页码值改变
    handleCurrentChange(newpage) {
      console.log(newpage)
      this.queryInfo.pagenum = newpage
      this.getDataList()
    },
    handleSuccess(res, file) {
      // 文件上传成功
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('上传文件失败' + res.message)
      }
      this.$message.success('文件上传成功')
      this.borderInfo.fujian = res.data.imgurl
    },
    handleRemove(file, fileList) {
      // 文件上传删除
      console.log(file, fileList)
      this.borderInfo.fujian = ''
    },
    handlePreview(file) {
      // 文件上传预览
      console.log(file)
      this.previewPath = file.response.data.imgurl
      this.preViewVisible = true
    }
  }
}
</script>
 <style lang="less" scoped>
</style>
